<template>
	<div class="game-container report-container">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane
				:label="$t('operation.client_banner.app_device')"
				name="first"
			>
				<main-content
					:tableHeight.sync="tableHeightFirst"
					:otherDependenComponents="otherDependenComponents"
				>
					<template slot="query">
						<el-form
							ref="searchForm"
							:inline="true"
							:model="queryData"
							class="flex-warp-container"
						>
							<el-form-item
								:label="$t('common.belong_merchant') + ':'"
								prop="merchantClientId"
								class="flex-row-container"
								label-width="77px"
							>
								<merchant-select
									v-model="queryData.merchantClientId"
									:placeholder="$t('common.select_all')"
									:merchantInfo.sync="searchmerchantInfo"
								></merchant-select>
							</el-form-item>
							<el-form-item
								:label="
									$t('operation.client_banner.banner_type') +
										':'
								"
								prop="bannerType"
								class="flex-row-container"
								label-width="95px"
							>
								<el-select
									v-model="queryData.bannerType"
									clearable
									style="width: 210px"
									:placeholder="$t('common.select_all')"
									:popper-append-to-body="false"
								>
									<el-option
										v-for="item in operateBannerList"
										:key="item.code"
										:label="item.description"
										:value="item.code"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item
								:label="
									$t('operation.client_banner.banner_name') +
										':'
								"
								prop="bannerName"
								class="flex-row-container"
								label-width="90px"
							>
								<el-input
									v-model="queryData.bannerName"
									clearable
									:maxlength="100"
									size="medium"
									style="width: 260px"
									v-input="{ name: 'symbols' }"
									:placeholder="$t('common.please_enter')"
									@keyup.enter.native="enterSearch"
								></el-input>
							</el-form-item>
							<el-form-item
								:label="
									$t('operation.client_banner.banner_time') +
										':'
								"
								class="tagheight flex-row-container"
								prop="bannerValidity"
								label-width="77px"
							>
								<el-select
									v-model="queryData.bannerValidity"
									clearable
									style="width: 210px"
									:placeholder="$t('common.select_all')"
									:popper-append-to-body="false"
								>
									<el-option
										v-for="item in operateValidityType"
										:key="item.code"
										:label="item.description"
										:value="item.code"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item
								:label="
									$t('operation.client_banner.whether_jump') +
										':'
								"
								class="tagheight flex-row-container"
								label-width="77px"
								prop="isLink"
							>
								<el-select
									v-model="queryData.isLink"
									style="width: 210px"
									clearable
									:placeholder="$t('common.select_all')"
									:popper-append-to-body="false"
								>
									<el-option
										key="1"
										value="1"
										:label="$t('common.yes')"
									/>
									<el-option
										key="0"
										value="0"
										:label="$t('common.no')"
									/>
									<!-- <el-option
									v-for="item in operateYesNo"
									:key="item.code"
									:label="item.description"
									:value="item.code"
								></el-option> -->
								</el-select>
							</el-form-item>
							<el-form-item
								:label="
									$t('operation.client_banner.jump_target') +
										':'
								"
								class="tagheight flex-row-container"
								label-width="77px"
								prop="linkTarget"
							>
								<el-select
									v-model="queryData.linkTarget"
									clearable
									style="width: 210px"
									:placeholder="$t('common.select_all')"
									:popper-append-to-body="false"
								>
									<el-option
										v-for="item in linkTargetArr"
										:key="item.code"
										:label="item.description"
										:value="item.code"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item
								:label="$t('common.status') + ':'"
								class="tagheight flex-row-container"
								label-width="55px"
								prop="bannerStatus"
							>
								<el-select
									v-model="queryData.bannerStatus"
									clearable
									style="width: 210px"
									:placeholder="$t('common.select_all')"
									:popper-append-to-body="false"
								>
									<el-option
										v-for="item in operateStatus"
										:key="item.code"
										:label="item.description"
										:value="item.code"
									></el-option>
								</el-select>
							</el-form-item>
							<div style="display: inline-block;">
								<el-select
									v-model="searchAdminType"
									style="width: 130px;margin-right:-5px;margin-top:2px"
									:placeholder="$t('common.select_all')"
									:popper-append-to-body="false"
									@change="
										queryData.createdBy = ''
										queryData.updatedBy = ''
									"
								>
									<el-option
										:key="0"
										:label="$t('common.createBy')"
										:value="0"
									></el-option>
									<el-option
										:key="1"
										:label="$t('common.last_updateBy')"
										:value="1"
									></el-option>
								</el-select>
								<el-form-item
									v-if="!searchAdminType"
									prop="createdBy"
								>
									<el-input
										v-model="queryData.createdBy"
										clearable
										:maxlength="20"
										size="medium"
										style="width: 200px"
										v-input="{ name: 'symbols' }"
										:placeholder="$t('common.please_enter')"
										@keyup.enter.native="enterSearch"
									></el-input>
								</el-form-item>
								<el-form-item
									v-if="searchAdminType"
									prop="updatedBy"
								>
									<el-input
										v-model="queryData.updatedBy"
										clearable
										:maxlength="20"
										size="medium"
										style="width: 200px"
										:placeholder="$t('common.please_enter')"
										@keyup.enter.native="enterSearch"
									></el-input>
								</el-form-item>
							</div>
							<el-form-item style="margin-left: 8px">
								<el-button
									type="primary"
									icon="el-icon-search"
									:disabled="loading"
									size="medium"
									@click="search"
								>
									{{ $t('common.search') }}
								</el-button>
								<el-button
									icon="el-icon-refresh-left"
									:disabled="loading"
									size="medium"
									@click="reset"
								>
									{{ $t('common.reset') }}
								</el-button>
								<el-button
									v-if="hasPermission('501011')"
									type="warning"
									icon="el-icon-folder"
									:disabled="loading"
									size="medium"
									@click="addLabel('新增')"
								>
									{{ $t('common.add') }}
								</el-button>
								<!-- v-if="hasPermission('324')" -->
								<!-- <el-button
									v-if="hasPermission('501012')"
									type="warning"
									icon="el-icon-sort"
									:disabled="loading"
									size="medium"
									@click="subSortadd"
								>
									{{
										$t(
											'operation.client_banner.banner_sort'
										)
									}}
								</el-button> -->
								<!-- v-if="hasPermission('328')" -->
							</el-form-item>
						</el-form>
					</template>
					<template slot="content">
						<el-table
							v-loading="loading"
							element-loading-spinner="el-icon-loading"
							:data="tableData"
							border
							size="mini"
							class="small-size-table"
							style="width: 100%"
							highlight-current-row
							:header-cell-style="getRowClass"
							:max-height="tableHeightFirst"
						>
							<el-table-column
								prop="sort"
								align="center"
								:label="
									$t('operation.client_banner.banner_sort')
								"
								width="100"
							>
								<template slot-scope="scope">
									<span>
										{{ scope.row.sort || '-' }}
									</span>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								prop="bannerName"
								:label="
									$t('operation.client_banner.banner_name')
								"
								width="160px"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									<span>
										{{ scope.row.bannerName || '-' }}
									</span>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								:label="
									$t('operation.client_banner.banner_type')
								"
								width="160px"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									<span>
										{{ scope.row.bannerTypeValue || '-' }}
									</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="bannerValidity"
								align="center"
								:label="
									$t('operation.client_banner.banner_time')
								"
								width="120"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{
										scope.row.bannerValidity === 0
											? $t('operation.limited_time')
											: scope.row.bannerValidity === 1
											? $t('operation.permanent')
											: '-'
									}}
								</template>
							</el-table-column>
							<el-table-column
								prop="upTime"
								align="center"
								:label="$t('operation.added_time')"
								width="160"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{ scope.row.upTime || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="downTime"
								align="center"
								:label="$t('operation.shelf_time')"
								width="160"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{ scope.row.downTime || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="isLink"
								align="center"
								:label="
									$t('operation.client_banner.whether_jump')
								"
								width="100"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{
										scope.row.isLink === 1
											? $t('common.yes')
											: scope.row.isLink === 0
											? $t('common.no')
											: '-'
									}}
								</template>
							</el-table-column>
							<el-table-column
								prop="linkTarget"
								align="center"
								:label="
									$t('operation.client_banner.jump_target')
								"
								width="150"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									<div v-if="scope.row.isLink === 0">
										-
									</div>
									<div v-else>
										<!-- <div
												v-if="
													scope.row.linkTarget === 0
												"
											>
												{{
													filterGameName(
														scope.row.gameId
													)
												}}
											</div> -->
										<div
											v-if="
												scope.row.linkTarget === 1 ||
													scope.row.linkTarget === 2
											"
										>
											{{
												typelinkTarget(
													scope.row.linkTarget
												)
											}}
										</div>
										<div v-else>-</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column
								prop="bannerStatus"
								align="center"
								:label="$t('common.status')"
								width="120"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									<div
										v-if="scope.row.bannerStatus === 0"
										class="disableRgba"
									>
										{{ $t('common.status_disabled') }}
									</div>
									<div
										v-else-if="scope.row.bannerStatus === 1"
										class="normalRgba"
									>
										{{ $t('common.status_turn_on') }}
									</div>
									<span v-else>-</span>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								:label="$t('common.image')"
								width="80"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									<span
										class="text-link"
										@click="
											rowData = scope.row
											imageViewerVisible = true
										"
									>
										{{ $t('common.click_show') }}
									</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="createdBy"
								align="center"
								:label="$t('common.createBy')"
								width="150"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{ scope.row.createdBy || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="createdAt"
								align="center"
								:label="$t('common.createAt')"
								width="160"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{ scope.row.createdAt || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="updatedBy"
								align="center"
								:label="$t('common.last_updateBy')"
								width="120"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{ scope.row.updatedBy || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="updatedAt"
								align="center"
								:label="$t('common.last_updateAt')"
								width="160"
								show-overflow-tooltip
							>
								<template slot-scope="scope">
									{{ scope.row.updatedAt || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="operating"
								align="center"
								:label="$t('common.actions')"
								width="270"
							>
								<template slot-scope="scope">
									<el-button
										v-if="
											scope.row.bannerStatus === 0 &&
												hasPermission('501013')
										"
										:disabled="loading"
										type="success"
										size="medium"
										class="noicon"
										@click="changeStatus(scope.row)"
									>
										{{ $t('common.turn_on') }}
									</el-button>
									<el-button
										v-if="
											scope.row.bannerStatus !== 0 &&
												hasPermission('501013')
										"
										:disabled="loading"
										type="danger"
										size="medium"
										class="noicon"
										@click="changeStatus(scope.row)"
									>
										{{ $t('common.disabled') }}
									</el-button>

									<el-button
										v-if="hasPermission('501014')"
										type="primary"
										icon="el-icon-edit"
										:disabled="scope.row.bannerStatus === 1"
										size="medium"
										@click="openEdit(scope.row)"
									>
										{{ $t('common.edit') }}
									</el-button>
									<el-button
										v-if="hasPermission('501015')"
										type="warning"
										icon="el-icon-delete"
										size="medium"
										:disabled="scope.row.bannerStatus === 1"
										@click="deleteBtn(scope.row)"
									>
										{{ $t('common.delete') }}
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<!-- 分页 -->
						<el-pagination
							:current-page.sync="pageNum"
							class="pageValue"
							background
							layout="total, sizes,prev, pager, next, jumper"
							:page-size="pageSize"
							:page-sizes="pageSizes"
							:total="total"
							:pager-count="9"
							@current-change="handleCurrentChange"
							@size-change="handleSizeChange"
						></el-pagination>
					</template>
				</main-content>
			</el-tab-pane>
			<el-tab-pane
				:label="$t('operation.client_banner.pc_device')"
				name="three"
			>
				<main-content
					:tableHeight.sync="tableHeightThree"
					:otherDependenComponents="otherDependenComponents"
				>
					<template slot="query">
						<el-form
							ref="searchFormPC"
							:inline="true"
							:model="queryData"
							class="flex-warp-container"
						>
							<el-form-item
								:label="$t('common.belong_merchant') + ':'"
								prop="merchantClientId"
								class="flex-row-container"
								label-width="77px"
							>
								<merchant-select
									v-model="queryData.merchantClientId"
									:placeholder="$t('common.select_all')"
									:merchantInfo.sync="searchmerchantInfo"
								></merchant-select>
							</el-form-item>
							<el-form-item
								:label="
									$t('operation.client_banner.banner_type') +
										':'
								"
								prop="bannerType"
								class="flex-row-container"
								label-width="95px"
							>
								<el-select
									v-model="queryData.bannerType"
									clearable
									style="width: 210px"
									:placeholder="$t('common.select_all')"
									:popper-append-to-body="false"
								>
									<el-option
										v-for="item in operatePcBannerList"
										:key="item.code"
										:label="item.description"
										:value="item.code"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item
								:label="
									$t('operation.client_banner.banner_name') +
										':'
								"
								prop="bannerName"
								class="flex-row-container"
								label-width="91px"
							>
								<el-input
									v-model="queryData.bannerName"
									clearable
									:maxlength="100"
									size="medium"
									style="width: 260px"
									:placeholder="$t('common.please_enter')"
									@keyup.enter.native="enterSearch"
								></el-input>
							</el-form-item>
							<el-form-item
								:label="
									$t('operation.client_banner.banner_time') +
										':'
								"
								class="tagheight flex-row-container"
								label-width="77px"
								prop="bannerValidity"
							>
								<el-select
									v-model="queryData.bannerValidity"
									clearable
									style="width: 210px"
									:placeholder="$t('common.select_all')"
									:popper-append-to-body="false"
								>
									<el-option
										v-for="item in operateValidityType"
										:key="item.code"
										:label="item.description"
										:value="item.code"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item
								:label="
									$t('operation.client_banner.whether_jump') +
										':'
								"
								class="tagheight flex-row-container"
								label-width="77px"
								prop="isLink"
							>
								<el-select
									v-model="queryData.isLink"
									style="width: 210px"
									clearable
									:placeholder="$t('common.select_all')"
									:popper-append-to-body="false"
								>
									<el-option
										key="1"
										value="1"
										:label="$t('common.yes')"
									/>
									<el-option
										key="0"
										value="0"
										:label="$t('common.no')"
									/>
									<!-- <el-option
									v-for="item in operateYesNo"
									:key="item.code"
									:label="item.description"
									:value="item.code"
								></el-option> -->
								</el-select>
							</el-form-item>
							<el-form-item
								:label="
									$t('operation.client_banner.jump_target') +
										':'
								"
								class="tagheight flex-row-container"
								label-width="77px"
								prop="linkTarget"
							>
								<el-select
									v-model="queryData.linkTarget"
									clearable
									style="width: 210px"
									:placeholder="$t('common.select_all')"
									:popper-append-to-body="false"
								>
									<el-option
										v-for="item in linkTargetArr"
										:key="item.code"
										:label="item.description"
										:value="item.code"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item
								:label="$t('common.status') + ':'"
								class="tagheight flex-row-container"
								label-width="55px"
								prop="bannerStatus"
							>
								<el-select
									v-model="queryData.bannerStatus"
									clearable
									style="width: 210px"
									:placeholder="$t('common.select_all')"
									:popper-append-to-body="false"
								>
									<el-option
										v-for="item in operateStatus"
										:key="item.code"
										:label="item.description"
										:value="item.code"
									></el-option>
								</el-select>
							</el-form-item>
							<div style="display: inline-block;">
								<el-select
									v-model="searchAdminType"
									style="width: 130px;margin-right:-5px;margin-top:2px"
									:placeholder="$t('common.select_all')"
									:popper-append-to-body="false"
									@change="
										queryData.createdBy = ''
										queryData.updatedBy = ''
									"
								>
									<el-option
										:key="0"
										:label="$t('common.createBy')"
										:value="0"
									></el-option>
									<el-option
										:key="1"
										:label="$t('common.last_updateBy')"
										:value="1"
									></el-option>
								</el-select>
								<el-form-item
									v-if="!searchAdminType"
									prop="createdBy"
								>
									<el-input
										v-model="queryData.createdBy"
										clearable
										:maxlength="20"
										size="medium"
										style="width: 200px"
										:placeholder="$t('common.please_enter')"
										@keyup.enter.native="enterSearch"
									></el-input>
								</el-form-item>
								<el-form-item
									v-if="searchAdminType"
									prop="updatedBy"
								>
									<el-input
										v-model="queryData.updatedBy"
										clearable
										:maxlength="20"
										size="medium"
										style="width: 200px"
										:placeholder="$t('common.please_enter')"
										@keyup.enter.native="enterSearch"
									></el-input>
								</el-form-item>
							</div>

							<el-form-item style="margin-left: 8px">
								<el-button
									type="primary"
									icon="el-icon-search"
									:disabled="loading"
									size="medium"
									@click="search"
								>
									{{ $t('common.search') }}
								</el-button>
								<el-button
									icon="el-icon-refresh-left"
									:disabled="loading"
									size="medium"
									@click="reset"
								>
									{{ $t('common.reset') }}
								</el-button>
								<el-button
									v-if="hasPermission('501011')"
									type="warning"
									icon="el-icon-folder"
									:disabled="loading"
									size="medium"
									@click="addLabel('新增')"
								>
									{{ $t('common.add') }}
								</el-button>
								<!-- <el-button
									v-if="hasPermission('501012')"
									type="warning"
									icon="el-icon-sort"
									:disabled="loading"
									size="medium"
									@click="subSortadd"
								>
									{{
										$t(
											'operation.client_banner.banner_sort'
										)
									}}
								</el-button> -->
							</el-form-item>
						</el-form>
					</template>
					<template slot="content">
						<el-table
							v-loading="loading"
							element-loading-spinner="el-icon-loading"
							:data="tableData"
							border
							size="mini"
							class="small-size-table"
							style="width: 100%"
							highlight-current-row
							:header-cell-style="getRowClass"
							:max-height="tableHeightThree"
						>
							<el-table-column
								prop="sort"
								align="center"
								:label="
									$t('operation.client_banner.banner_sort')
								"
								width="100"
							>
								<template slot-scope="scope">
									<span>
										{{ scope.row.sort || '-' }}
									</span>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								:label="
									$t('operation.client_banner.banner_name')
								"
								width="160px"
							>
								<template slot-scope="scope">
									<span>
										{{ scope.row.bannerName || '-' }}
									</span>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								:label="
									$t('operation.client_banner.banner_type')
								"
								width="160px"
							>
								<template slot-scope="scope">
									<span>
										{{ scope.row.bannerTypeValue || '-' }}
									</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="bannerValidity"
								align="center"
								:label="
									$t('operation.client_banner.banner_time')
								"
								width="120"
							>
								<template slot-scope="scope">
									{{
										scope.row.bannerValidity === 0
											? $t('operation.limited_time')
											: scope.row.bannerValidity === 1
											? $t('operation.permanent')
											: '-'
									}}
								</template>
							</el-table-column>
							<el-table-column
								prop="upTime"
								align="center"
								:label="$t('operation.added_time')"
								width="160"
							>
								<template slot-scope="scope">
									{{ scope.row.upTime || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="downTime"
								align="center"
								:label="$t('operation.shelf_time')"
								width="160"
							>
								<template slot-scope="scope">
									{{ scope.row.downTime || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="isLink"
								align="center"
								:label="
									$t('operation.client_banner.whether_jump')
								"
								width="100"
							>
								<template slot-scope="scope">
									{{
										scope.row.isLink === 1
											? $t('common.yes')
											: scope.row.isLink === 0
											? $t('common.no')
											: '-'
									}}
								</template>
							</el-table-column>
							<el-table-column
								prop="linkTarget"
								align="center"
								:label="
									$t('operation.client_banner.jump_target')
								"
								width="150"
							>
								<template slot-scope="scope">
									<div v-if="scope.row.isLink === 0">
										-
									</div>
									<div v-else>
										<!-- <div
												v-if="
													scope.row.linkTarget === 0
												"
											>
												{{
													filterGameName(
														scope.row.gameId
													)
												}}
											</div> -->
										<div
											v-if="
												scope.row.linkTarget === 1 ||
													scope.row.linkTarget === 2
											"
										>
											{{
												typelinkTarget(
													scope.row.linkTarget
												)
											}}
										</div>
										<div v-else>-</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column
								prop="status"
								align="center"
								:label="$t('common.status')"
								width="120"
							>
								<template slot-scope="scope">
									<div
										v-if="scope.row.bannerStatus === 0"
										class="disableRgba"
									>
										{{ $t('common.status_disabled') }}
									</div>
									<div
										v-else-if="scope.row.bannerStatus === 1"
										class="normalRgba"
									>
										{{ $t('common.status_turn_on') }}
									</div>
									<span v-else>-</span>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								:label="$t('common.image')"
								width="80"
							>
								<template slot-scope="scope">
									<span
										class="text-link"
										@click="
											rowData = scope.row
											imageViewerVisible = true
										"
									>
										{{ $t('common.click_show') }}
									</span>
								</template>
							</el-table-column>
							<el-table-column
								prop="createdBy"
								align="center"
								:label="$t('common.createBy')"
								width="150"
							>
								<template slot-scope="scope">
									{{ scope.row.createdBy || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="createdAt"
								align="center"
								:label="$t('common.createAt')"
								width="160"
							>
								<template slot-scope="scope">
									{{ scope.row.createdAt || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="updatedBy"
								align="center"
								:label="$t('common.last_updateBy')"
								width="120"
							>
								<template slot-scope="scope">
									{{ scope.row.updatedBy || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="updatedAt"
								align="center"
								:label="$t('common.last_updateAt')"
								width="160"
							>
								<template slot-scope="scope">
									{{ scope.row.updatedAt || '-' }}
								</template>
							</el-table-column>
							<el-table-column
								prop="operating"
								align="center"
								:label="$t('common.actions')"
								width="270"
							>
								<template slot-scope="scope">
									<el-button
										v-if="
											scope.row.bannerStatus === 0 &&
												hasPermission('501013')
										"
										:disabled="loading"
										type="success"
										size="medium"
										class="noicon"
										@click="changeStatus(scope.row)"
									>
										{{ $t('common.turn_on') }}
									</el-button>
									<el-button
										v-if="
											scope.row.bannerStatus !== 0 &&
												hasPermission('501013')
										"
										:disabled="loading"
										type="danger"
										size="medium"
										class="noicon"
										@click="changeStatus(scope.row)"
									>
										{{ $t('common.disabled') }}
									</el-button>

									<el-button
										v-if="hasPermission('501014')"
										type="primary"
										icon="el-icon-edit"
										:disabled="scope.row.bannerStatus === 1"
										size="medium"
										@click="openEdit(scope.row)"
									>
										{{ $t('common.edit') }}
									</el-button>
									<el-button
										v-if="hasPermission('501015')"
										type="warning"
										icon="el-icon-delete"
										size="medium"
										:disabled="scope.row.bannerStatus === 1"
										@click="deleteBtn(scope.row)"
									>
										{{ $t('common.delete') }}
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<!-- 分页 -->
						<el-pagination
							:current-page.sync="pageNum"
							class="pageValue"
							background
							layout="total, sizes,prev, pager, next, jumper"
							:page-size="pageSize"
							:page-sizes="pageSizes"
							:total="total"
							:pager-count="9"
							@current-change="handleCurrentChange"
							@size-change="handleSizeChange"
						></el-pagination>
					</template>
				</main-content>
			</el-tab-pane>
		</el-tabs>
		<el-dialog
			:title="$t('common.add') + '/' + $t('common.edit')"
			width="800px"
			center
			class="rempadding"
			:visible.sync="addFormDataVisible"
			destroy-on-close
		>
			<el-form ref="formSub" :model="addFormData" label-width="105px">
				<el-form-item
					:label="$t('common.choose_merchant') + ':'"
					:rules="[
						{
							required: true,
							message: $t('common.please_choose'),
							trigger: 'change'
						}
					]"
					prop="merchantClientId"
				>
					<merchant-select
						ref="merchantSelect"
						v-model="addFormData.merchantClientId"
						style="width: 507px"
						:disabled="!!rowData"
						:placeholder="$t('common.components.select_merchant')"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="$t('operation.client_banner.banner_sort') + ':'"
					prop="sort"
					style="width: 507px;margin-bottom: 5px;"
					:rules="[
						{
							required: true,
							message: $t('common.please_choose'),
							trigger: 'change'
						}
					]"
				>
					<el-select
						v-model="addFormData.sort"
						:placeholder="$t('common.please_choose')"
						style="width: 507px"
					>
						<el-option
							v-for="item in QueryareaList"
							:key="item"
							:label="item"
							:value="item"
						></el-option>
					</el-select>
				</el-form-item>
				<div style="color:red;padding-left:145px;margin-bottom: 15px;">
					*{{ $t('operation.client_banner.sort_tips') }}
				</div>
				<el-form-item
					:label="$t('operation.client_banner.banner_name') + ':'"
					prop="bannerName"
					:rules="[
						{
							required: true,
							message:
								$t('common.please_enter') +
								$t('operation.client_banner.banner_name'),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model="addFormData.bannerName"
						:maxlength="100"
						class="region"
						v-input="{ name: 'symbols' }"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="$t('operation.client_banner.banner_type') + ':'"
					prop="bannerType"
					:rules="[
						{
							required: true,
							message:
								$t('common.please_choose') +
								$t('operation.client_banner.banner_type'),
							trigger: 'change'
						}
					]"
				>
					<el-select
						v-model="addFormData.bannerType"
						class="region"
						:placeholder="$t('common.please_choose')"
						:disabled="!!rowData"
					>
						<el-option
							v-for="item in operateProxyBannerList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('operation.client_banner.banner_time') + ':'"
					prop="bannerValidity"
					:rules="[
						{
							required: true,
							message:
								$t('common.please_choose') +
								$t('operation.client_banner.banner_time'),
							trigger: 'change'
						}
					]"
				>
					<el-select
						v-model="addFormData.bannerValidity"
						class="region"
						:placeholder="$t('common.please_choose')"
					>
						<el-option
							v-for="item in operateValidityType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					class="time"
					:label="$t('operation.added_time') + ':'"
					:rules="[
						{
							required: true,
							validator: validateUpTime,
							trigger: 'change'
						}
					]"
					prop="upTime"
				>
					<el-date-picker
						v-model="upTime"
						style="width: 507px"
						size="medium"
						:picker-options="dateNow"
						type="datetime"
						align="right"
						:clearable="false"
						@change="changeTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					v-if="addFormData.bannerValidity === 0"
					class="time"
					:label="$t('operation.shelf_time') + ':'"
					:rules="[
						{
							required: true,
							validator: validateDownTime,
							trigger: 'blur'
						}
					]"
					prop="downTime"
				>
					<el-date-picker
						v-model="downTime"
						style="width: 507px"
						size="medium"
						:picker-options="dateEnd"
						type="datetime"
						align="right"
						:clearable="false"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="$t('operation.client_banner.whether_jump') + ':'"
					prop="isLink"
					:rules="[
						{
							required: true,
							message: $t('common.please_choose'),
							trigger: 'change'
						}
					]"
				>
					<el-select
						v-model="addFormData.isLink"
						class="region"
						:placeholder="$t('common.please_choose')"
					>
						<el-option
							:label="$t('operation.client_banner.jump')"
							:value="1"
						></el-option>
						<el-option
							:label="$t('operation.client_banner.no_jump')"
							:value="0"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					v-if="addFormData.isLink === 1"
					key="linkTarget"
					:label="$t('operation.client_banner.jump_target') + ':'"
					prop="linkTarget"
					:rules="[
						{
							required: true,
							message:
								$t('common.please_enter') +
								$t('operation.client_banner.jump_target'),
							trigger: 'change'
						}
					]"
				>
					<el-select
						v-model="addFormData.linkTarget"
						class="region"
						@change="changeSelect($event)"
					>
						<el-option
							v-for="item in linkTargetArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item
					v-if="!addFormData.linkTarget && addFormData.isLink"
					prop="gameId"
					:label="$t('operation.client_banner.game') + ':'"
					:rules="[
						{
							required: true,
							message:
								$t('common.please_choose') +
								$t('operation.client_banner.game')
						}
					]"
				>
					<el-select
						v-model="addFormData.gameId"
						:placeholder="$t('common.please_choose')"
						class="region"
					>
						<el-option
							v-for="item in QueryGameList"
							:key="item.gameId"
							:label="item[getKey('gameName', { zh: true })]"
							:value="item.gameId"
						></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item
					v-if="
						addFormData.isLink &&
							(addFormData.linkTarget === 1 ||
								addFormData.linkTarget === 2)
					"
					prop="targetUrl"
					:label="$t('operation.client_banner.link') + ':'"
					:rules="[
						{
							required: true,
							message:
								$t('common.please_choose') +
								$t('operation.client_banner.link'),
							trigger: 'blur'
						}
					]"
				>
					<el-input
						v-model="addFormData.targetUrl"
						class="region"
						:placeholder="$t('common.please_enter')"
						show-word-limit
					></el-input>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item
							:label="$t('agent.picture_upload')"
							prop="pictureUrl"
							:rules="[
								{
									required: true,
									message: $t('common.please_upload_img'),
									trigger: 'change'
								}
							]"
						>
							<UploadItem
								ref="imgUpload1"
								:upload-file-type="'image'"
								:imgUrl="addFormData.pictureUrl || ''"
								:platform="'PC'"
								:uploadAPI="uploadAPI"
								:bounds="imageSize"
								@upoladItemSucess="
									(file) =>
										handleUploadSucess(file, 'pictureUrl')
								"
								@startUpoladItem="handleStartUpload"
								@deleteUpoladItem="
									() => handleDeleteUpload('pictureUrl')
								"
								@upoladItemDefeat="
									(e) => handleUploadDefeat('pictureUrl')
								"
							></UploadItem>
							<div class="remakeBox">
								<span class="danger">*</span>
								{{ $t('operation.upload_tips1') }}png，jpg
								<span v-if="imageSize.width">
									{{ $t('operation.upload_tips2')
									}}{{ imageSize.width }}
								</span>
								<span class="danger">*</span>
								{{ imageSize.height }}
								{{ $t('operation.upload_tips3') }}5M
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cacleDialog()">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					type="primary"
					:loading="loading"
					@click="subAddOrEidt"
				>
					{{ $t('common.save') }}
				</el-button>
			</div>
		</el-dialog>
		<el-dialog
			:title="$t('operation.client_banner.setting')"
			:visible.sync="subSort"
			width="970px"
			:destroy-on-close="true"
		>
			<draggable v-model="sortareaList" @start="onStart" @end="onEnd">
				<transition-group>
					<div
						v-for="tiem in sortareaList"
						:key="tiem.id"
						class="reach"
					>
						{{ tiem.bannerName }}
					</div>
				</transition-group>
			</draggable>
			<div slot="footer" class="dialog-footer">
				<el-button @click="subSort = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="setoperateConfigBannerSortFn">
					{{ $t('common.sure') }}
				</el-button>
			</div>
		</el-dialog>
		<!-- <image-viewer
			v-if="rowData"
			:visible.sync="imageViewerVisible"
			:url-list="[
				rowData.pictureUrl,
				rowData.pictureUrlEn,
				rowData.pictureUrlTh,
				rowData.pictureUrlVn
			]"
		/> -->
		<el-dialog
			:visible.sync="imageViewerVisible"
			:title="$t('common.picture_preview')"
			:width="getWidth('700px')"
		>
			<div v-if="rowData" class="img-view">
				<div v-show="rowData.pictureUrl || ''">
					<!-- <h2>{{ $t('common.zh') }}:</h2> -->
					<el-image :src="rowData.pictureUrl" lazy></el-image>
				</div>
				<!-- <div v-show="rowData.pictureUrlEn">
					<h2>{{ $t('common.en') }}:</h2>
					<img :src="rowData.pictureUrlEn" alt="" />
				</div>
				<div v-show="rowData.pictureUrlTh">
					<h2>{{ $t('common.th') }}:</h2>
					<img :src="rowData.pictureUrlTh" alt="" />
				</div>
				<div v-show="rowData.pictureUrlVn">
					<h2>{{ $t('common.vn') }}:</h2>
					<img :src="rowData.pictureUrlVn" alt="" />
				</div> -->
			</div>
		</el-dialog>
	</div>
</template>

<script>
import UploadItem from '@/components/UploadItem'
import dayjs from 'dayjs'
import list from '@/mixins/list'
import draggable from 'vuedraggable'
import { routerNames } from '@/utils/consts'
import { mapGetters } from 'vuex'
import {
	bannerAdd,
	bannerUpdataStatus,
	bannerEdit,
	bannerDel,
	setoperateConfigBannerSort
} from '@/api/operation'
import MainContent from '@/components/MainContent/index.vue'
// import { getGameList } from '@/api//game'
// const startTime = dayjs()
// 	.startOf('day')
// 	.valueOf()
const endTime = dayjs()
	.endOf('day')
	.valueOf()
export default {
	name: routerNames.clientBanner,
	components: { draggable, UploadItem, MainContent },
	mixins: [list],
	data() {
		return {
			tableHeightFirst: 480,
			tableHeightThree: 480,
			otherDependenComponents: ['wrap'],
			searchmerchantInfo: {},
			sortareaList: [],
			QueryareaList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
			imageViewerVisible: false,
			upTime: Date.now(),
			downTime: endTime,
			dateNow: {
				disabledDate(time) {
					return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
				}
			},
			dateEnd: {
				disabledDate(time) {
					return time.getTime() < Date.now()
				}
			},
			QueryGameList: [],
			tableData: [],
			drag: false,
			subSort: false,
			clientType: 0,
			imgVisible: false,
			addFormDataVisible: false,
			isEdit: false,
			addOrEdit: 'add',
			rowData: {},
			queryData: {
				merchantClientId: undefined,
				bannerName: '',
				bannerValidity: undefined,
				bannerType: undefined,
				isLink: undefined,
				linkTarget: undefined,
				bannerStatus: undefined,
				createdBy: '',
				updatedBy: ''
			},
			searchAdminType: 0,
			addFormData: {
				// merchantClientId: '',
				// sort: 1,
				// bannerName: '',
				// bannerValidity: 1,
				isLink: undefined,
				bannerType: undefined,
				// linkTarget: 0,
				// targetUrl: '',
				// bannerStatus: 0,
				pictureUrl: '',
				pictureUrlEn: '',
				pictureUrlTh: '',
				pictureUrlVn: ''
				// gameId: undefined
			},
			activeName: 'first',
			bigImage: '',
			loading: false,
			imageSize: {
				width: undefined,
				height: undefined
			},
			operateProxyBannerList: []
		}
	},
	computed: {
		linkTargetArr() {
			return [
				{
					code: 1,
					description: this.$t('operation.client_banner.address')
				},
				{
					code: 2,
					description: this.$t('operation.client_banner.out_address')
				}
			]
		},
		operateBannerList() {
			return [
				{
					code: 1,
					description: this.$t(
						'operation.client_banner.firstPageBanner'
					)
				},
				{
					code: 2,
					description: this.$t(
						'operation.client_banner.firstPageDailog'
					)
				},
				{
					code: 3,
					description: this.$t(
						'operation.client_banner.gameToolBanner'
					)
				},
				{
					code: 4,
					description: this.$t(
						'operation.client_banner.personCenterBanner'
					)
				}
			]
		},
		operatePcBannerList() {
			return [
				{
					code: 5,
					description: this.$t(
						'operation.client_banner.firstPageBanner'
					)
				},
				{
					code: 6,
					description: this.$t(
						'operation.client_banner.login_popup_banner'
					)
				}
			]
		},
		operateValidityType() {
			return [
				{ code: 0, description: this.$t('operation.limited_time') },
				{ code: 1, description: this.$t('operation.permanent') }
			]
			// return this.globalDics.operateValidityType || []
		},
		operateYesNo() {
			return this.globalDics.operateYesNo || []
		},
		operateStatus() {
			return [
				{ code: 0, description: this.$t('common.status_disabled') },
				{ code: 1, description: this.$t('common.status_turn_on') }
			]
			// return this.globalDics.operateStatus || []
		},
		fileSize() {
			return 2 * 1024 * 1024
		},
		uploadAPI() {
			return this.$api.imageUpload
		},
		...mapGetters(['merchantInfo'])
	},
	watch: {
		upTime: {
			handler(newV, oldV) {
				this.dateEnd = {
					disabledDate(time) {
						return time.getTime() < newV
					}
				}
			},
			deep: true
		},
		'addFormData.bannerType': {
			handler(newV, oldV) {
				if (this.rowData === null) {
					if (newV !== undefined) {
						this.judgeUploadPicSize(newV)
					}
				} else {
					this.judgeUploadPicSize(this.rowData?.bannerType)
				}
			},
			deep: true
		},
		'addFormData.isLink': {
			handler(newVal) {
				if (newVal === 0) {
					this.addFormData.linkTarget = undefined
					this.addFormData.targetUrl = undefined
				}
			}
		}
	},
	created() {
		// this.getQueryGameList()
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantClientId = this.$store.getters.merchantInfo.id
			this.loadData()
		}
		this.operateProxyBannerList = this.operateBannerList
	},
	methods: {
		cacleDialog() {
			this.addFormDataVisible = false
		},
		judgeUploadPicSize(newV) {
			if (this.activeName === 'first') {
				if (newV === 1) {
					this.imageSize = {
						width: 1125,
						height: 645
					}
				} else if (newV === 2) {
					this.imageSize = {
						width: 750,
						height: 800
					}
				} else if (newV === 3) {
					this.imageSize = {
						width: 702,
						height: 200
					}
				} else if (newV === 4) {
					this.imageSize = {
						width: 702,
						height: 200
					}
				}
			} else if (this.activeName === 'three') {
				if (newV === 5) {
					this.imageSize = {
						width: 1920,
						height: 648
					}
				} else if (newV === 6) {
					this.imageSize = {
						width: 365,
						height: 555
					}
				}
			}
		},
		loadData(formName = 'searchForm') {
			this.tableData = []
			this.loading = true
			const params = {
				...this.queryData,
				clientType: this.clientType,
				...this.getParams()
			}
			for (const k in params) {
				if (params[k] === '') {
					delete params[k]
				}
			}
			this.$api
				.getBannerList(params)
				.then((res) => {
					if (res?.code === 200) {
						const { record, totalRecord } = res.data || {}
						this.tableData = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		getQueryarea() {
			this.$api.operateConfigBannerQueryBannerAreaAPI().then((res) => {
				if (res?.code === 200) {
					this.QueryareaList = res.data || []
				}
			})
		},
		// 获取所有游戏
		// getQueryGameList() {
		// 	getGameList({ pageSize: 500 }).then((res) => {
		// 		if (res?.code === 200) {
		// 			this.QueryGameList = res.data.record || []
		// 		}
		// 	})
		// },
		// filterGameName(val) {
		// 	const langKeyList = {
		// 		zh_CN: 'gameName',
		// 		en_US: 'gameEnName',
		// 		vi_VN: 'gameVnName',
		// 		th_TH: 'gameThName'
		// 	}
		// 	const lis = this.QueryGameList.find(
		// 		(item) => item.gameId + '' === val + ''
		// 	)
		// 	return lis?.[langKeyList[this.$i18n.locale]] || '-'
		// },
		typelinkTarget(val) {
			const lis = this.linkTargetArr.find((item) => item.code === val)
			return lis?.description || '-'
		},
		addLabel(val) {
			this.rowData = null
			this.addFormData = {
				isLink: undefined,
				linkTarget: 1,
				targetUrl: '',
				merchantClientId:
					this.$store.getters.merchantInfo.id || undefined,
				pictureUrl: '',
				pictureUrlEn: '',
				pictureUrlTh: '',
				pictureUrlVn: '',
				bannerType: ''
			}
			this.imageSize = {}
			this.addFormDataVisible = true
			this.$nextTick(() => {
				this.$refs.formSub.clearValidate()
				this.$refs.imgUpload1?.clearFile?.()
				this.$refs.imgUpload2?.clearFile?.()
				this.$refs.imgUpload3?.clearFile?.()
				this.$refs.imgUpload4?.clearFile?.()
				this.upTime = Date.now()
				this.downTime = endTime
				this.addOrEdit = 'add'
			})
		},
		isLinkchangeSelect(val) {
			if (val === 0) {
				this.addFormData.linkTarget = undefined
			} else {
				this.addFormData.linkTarget = 0
			}
		},
		changeSelect(val) {
			this.addFormData.targetUrl = ''
			this.$refs['formSub'].clearValidate()
		},
		openEdit(row) {
			this.rowData = { ...row }
			this.addFormDataVisible = true
			this.addOrEdit = 'edit'
			this.$nextTick(() => {
				this.addFormData = { ...row }
				setTimeout(() => {
					if (this.$refs.imgUpload1) {
						this.$refs.imgUpload1.fileUrl = row?.pictureUrl || ''
					}
					if (this.$refs.imgUpload2) {
						this.$refs.imgUpload2.fileUrl = row?.pictureUrlEn || ''
					}
					if (this.$refs.imgUpload3) {
						this.$refs.imgUpload3.fileUrl = row?.pictureUrlVn || ''
					}
					if (this.$refs.imgUpload4) {
						this.$refs.imgUpload4.fileUrl = row?.pictureUrlTh || ''
					}
				}, 100)
				this.upTime = row.upTime || undefined
				this.downTime = row.downTime || undefined
				this.addFormData.merchantClientId = row.merchantId
				this.addFormData.bannerType = row.bannerType || undefined
			})
		},
		subAddOrEidt() {
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					const obj = {
						upTime: undefined,
						downTime: undefined
					}
					if (this.addFormData.bannerValidity === 0) {
						obj.upTime = dayjs(this.upTime).format(
							'YYYY-MM-DD HH:mm:ss'
						)
						obj.downTime = dayjs(this.downTime).format(
							'YYYY-MM-DD HH:mm:ss'
						)
					} else {
						obj.upTime = dayjs(this.upTime).format(
							'YYYY-MM-DD HH:mm:ss'
						)
					}
					const params = {
						...this.addFormData,
						clientType: this.clientType,
						...obj
					}
					// if (params.gameId) {
					// 	params.gameName =
					// 		this.QueryGameList.find(
					// 			(i) => i.gameId === params.gameId
					// 		)?.gameName || ''
					// 	params.gameCode =
					// 		this.QueryGameList.find(
					// 			(i) => i.gameId === params.gameId
					// 		)?.venueCode || ''
					// }
					for (const k in params) {
						if (params[k] === '' || params[k] === null) {
							delete params[k]
						}
					}
					this.loading = true
					if (this.addOrEdit === 'add') {
						this.setOperateConfigBannerAdd(params)
					} else {
						params.id = this.rowData.id
						this.setBannerUpdate(params)
					}
				}
			})
		},
		setOperateConfigBannerAdd(val) {
			bannerAdd(val)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.$message.success(this.$t('common.add_success'))
						this.loadData()
					}
					this.addFormDataVisible = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 切换导航
		handleClick(tab) {
			this.$nextTick(() => {
				if (this.$refs.searchForm) {
					this.$refs.searchForm.resetFields()
					if (!this.$store.getters.isZk) {
						this.queryData.merchantClientId = this.$store.getters.merchantInfo.id
					}
					const name = tab.name
					if (name === 'first') {
						this.operateProxyBannerList = []
						this.operateProxyBannerList = this.operateBannerList
						this.imageSize = {}
						this.judgeUploadPicSize() // 1
						this.$refs.searchForm.resetFields()
						this.clientType = 0
						if (!this.$store.getters.isZk) {
							this.queryData.merchantClientId = this.$store.getters.merchantInfo.id
						}
						this.loadData('searchForm')
					} else if (name === 'second') {
						this.$refs.searchFormH5.resetFields()
						if (!this.$store.getters.isZk) {
							this.queryData.merchantClientId = this.$store.getters.merchantInfo.id
						}
						this.loadData('searchFormH5')
					} else {
						this.clientType = 2
						this.operateProxyBannerList = []
						this.operateProxyBannerList = this.operatePcBannerList
						this.imageSize = {}
						this.judgeUploadPicSize() //
						this.$refs.searchFormPC.resetFields()
						if (!this.$store.getters.isZk) {
							this.queryData.merchantClientId = this.$store.getters.merchantInfo.id
						}
						this.loadData('searchFormPC')
					}
				}
			})
		},
		validateUpTime(rule, value, callback) {
			const up = dayjs(this.upTime).unix()
			const down = dayjs(this.downTime).unix()
			if (!this.upTime) {
				return callback(this.$t('common.please_choose'))
			}
			if (this.addFormData.bannerValidity === 0 && up > down) {
				return callback(this.$t('operation.client_banner.input_tips1'))
			}
			callback()
		},
		validateDownTime(rule, value, callback) {
			const up = dayjs(this.upTime).unix()
			const down = dayjs(this.downTime).unix()
			if (!this.downTime) {
				return callback(this.$t('common.please_choose'))
			}
			if (this.addFormData.bannerValidity === 0 && up > down) {
				return callback(this.$t('operation.client_banner.input_tips2'))
			} else {
				this.$refs.formSub.clearValidate('upTime')
				callback()
			}
		},
		changeTime(val) {
			// this.upTime = val
			// const Timestamp = new Date(new Date(val).toLocaleDateString()).getTime()
			// if (Timestamp === startTime) {
			// 	this.upTime = Date.now()
			// } else {
			// 	this.upTime = Timestamp
			// }
		},
		// 编辑
		setBannerUpdate(val) {
			this.loading = true
			bannerEdit(val)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.$message({
							message: this.$t('common.edit_success'),
							type: 'success'
						})
						this.addFormDataVisible = false
						this.loadData()
					}
				})
				.catch((e) => {
					this.loading = false
				})
		},
		// 删除
		deleteBtn(val) {
			const { id } = val
			this.$confirm(
				`<strong>${this.$t(
					'operation.delete_tips'
				)}?</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
					'common.del_tips'
				)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					bannerDel({ id, merchantClientCode: val.merchantId })
						.then((res) => {
							loading.close()
							if (res?.code === 200) {
								this.$message({
									type: 'success',
									message: this.$t('common.delete_success')
								})
							} else {
								this.$message({
									type: 'error',
									message: this.$t('common.delete_fail')
								})
							}
							this.loadData()
						})
						.catch(() => {
							loading.close()
						})
				})
				.catch(() => {})
		},
		changeStatus(val) {
			const status = val.bannerStatus === 0 ? 1 : 0
			this.$confirm(
				`<strong>${this.$t('operation.switch_status_tips1')}${
					val.bannerStatus === 0
						? this.$t('common.start_up')
						: this.$t('common.disabled')
				}${this.$t(
					'common.actions'
				)}?</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
					'operation.switch_status_tips2'
				)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					bannerUpdataStatus({
						id: val.id,
						status: status,
						merchantClientCode: val.merchantId
					}).then((res) => {
						if (res?.code === 200) {
							this.$message({
								type: 'success',
								message: this.$t('common.action_success')
							})
						} else {
							this.$message({
								type: 'error',
								message: this.$t('common.action_fail')
							})
						}
						this.loadData()
					})
				})
				.catch(() => {})
		},

		// 开始拖拽事件
		onStart() {
			this.drag = true
		},
		// 拖拽结束事件
		onEnd() {
			this.drag = false
		},
		setoperateConfigBannerSortFn() {
			const list = this.sortareaList.map((item, index) => {
				return {
					id: item.id,
					sort: index + 1
				}
			})
			const params = {
				merchantClientId: this.queryData.merchantClientId,
				list
			}
			setoperateConfigBannerSort(params).then((res) => {
				if (res?.code === 200) {
					this.$message({
						message: this.$t('common.action_success'),
						type: 'success'
					})
					this.subSort = false
					setTimeout(this.loadData(), 500)
				}
			})
		},
		subSortadd() {
			// const arr = this.QueryareaList
			// const newArr = []
			// for (let i = 0; i < arr.length; i++) {
			//   const ele = arr[i]
			//   newArr.push(ele.code)
			// }
			// const sortIds = newArr.join(',')
			if (!this.queryData.merchantClientId) {
				return this.$message.error(
					this.$t('common.components.select_merchant')
				)
			}
			this.$api
				.operatecCnfigBannerQuerySortedBannerArea({
					clientType: this.clientType,
					merchantClientId: this.queryData.merchantClientId
				})
				.then((res) => {
					if (res?.code === 200) {
						this.sortareaList = res.data || []
						this.subSort = true
					}
				})
			this.subSort = false
		},
		handleStartUpload() {
			this.$message.info(this.$t('common.upload_start'))
		},
		handleUploadSucess({ index, file, id }, key) {
			this.addFormData[key] = file.imgUrl
			this.$refs.formSub.clearValidate(key)
		},
		handleUploadDefeat(key) {
			this.addFormData[key] = ''
			this.$message.error(this.$t('common.upload_fail'))
		},
		handleDeleteUpload(key) {
			this.addFormData[key] = ''
			this.$message.warning(this.$t('common.upload_del'))
		},

		changeTableSort({ column, prop, order }) {
			if (prop === 'upTime') {
				prop = 0
			}
			if (prop === 'downTime') {
				prop = 1
			}
			if (prop === 'createdAt') {
				prop = 2
			}
			if (prop === 'updatedAt') {
				prop = 3
			}
			this.pageNum = 1
			this.queryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderType
				delete this.queryData.orderType
			}
			this.loadData()
		},
		reset() {
			this.searchAdminType = 0
			this.$refs.searchForm.resetFields()
			if (!this.$store.getters.isZk) {
				this.queryData.merchantClientId = this.$store.getters.merchantInfo.id
			}
			this.loadData()
		},
		filterAreaList(val) {
			const res = this.QueryareaList.find((item) => item.code === val)
			return res?.value || '-'
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
// .time {
// 	margin-left: 45px;
// }
.game-container .params {
	padding-block: 22px;
}
.content {
	margin-top: 65px;
}
.reach {
	padding: 6px;
	background-color: #1abc9c;
	border: solid 1px #eee;
	margin-bottom: 10px;
	cursor: move;
	line-height: 20px;
	width: 110px;
	display: inline-block;
	text-align: center;
}
.chosen {
	border: solid 2px #3089dc !important;
}
.region {
	width: 507px;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .el-tabs__content {
	overflow: unset;
}
.remakeBox {
	width: 600px;
	line-height: 20px;
	word-break: break-word;
}
.img-view {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	div {
		margin: 0 0 20px 0;
		width: 300px;
		img {
			width: 100%;
			height: auto;
			display: block;
		}
	}
}
</style>
